<script setup>
import { ref } from 'vue'
// 父传子
// 1.给子组件，添加属性的方式传值
// 2.在子组件，通过props接收

// 局部组件(导入进来就能用)
import SonCom from '@/components/son-com.vue'

// 组件动态传值
const money = ref(100)
const getMoney = () => {
  money.value += 10
}
</script>

<template>
  <div>
    <h3>
      父组件 - {{money}}
      <button @click="getMoney">挣钱</button>
    </h3>
    <!--给子组件，添加属性的方式传值 -->
    <SonCom car="宝马车" :money="money"></SonCom>
  </div>
</template>


<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
